<template>
  <div class="page selectMeetingRoom">
    <van-nav-bar left-arrow @click-left="onClickBack" class="my-nav-bar" />
    <van-image :src="require('@/assets/images/meetingOverview/chooseMeeting.png')" alt="" width="100%"
      style="display: block;padding: 15px;padding-right:15px;transform: translateY(-51px)" />
    <div class="fcontent">
      <div class="content">
        <div class="chooseRoom">
          <span class="chooseRoom-title">选择会议室</span>
          <div class="chooseRoom-filter">
            <van-image :src="require('@/assets/images/meetingOverview/filter.png')" alt="" width="20px"
              style="display: inline-block;" />
            <span>筛选</span>
          </div>
        </div>
        <div class="card chooseDate">
          <div class="chooseDate-text">
            <van-image :src="require('@/assets/images/meetingOverview/time.png')" alt="" width="15px" />
            <span>{{ $dayjs(formData.date).format("YYYY-MM-DD") }} {{ $dayjs(formData.date).format("dddd") }}</span>
          </div>
          <van-icon name="arrow" @click="showDate = true" />
        </div>
      </div>
      <div class="card-container">
        <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
          <van-list v-model="loading" :finished="finished" :finished-text="finishedText" @load="onLoad">
            <div class="card container" v-for="item in list" :key="item.id" @click="handleGoApply(item)">
              <div class="card-title">
                <div class="card-title-text">{{ item.roomName }}</div>
                <div class="card-person">
                  <van-image :src="require('@/assets/images/meetingOverview/person.png')" alt="" width="18px" />
                  <span>{{ item.roomSeatNum }}</span>
                </div>
              </div>
              <div class="card-things">
                <span class="things" v-for="item2 in item.roomEquipmentsName.split(',')" :key="item2">{{ item2 }}</span>
              </div>
              <div class="card-place">
                <van-image :src="require('@/assets/images/meetingOverview/place.png')" alt="" width="15px" />
                <span class="place">{{ item.roomAddr }}</span>
              </div>
              <div class="card-time">
                <div v-for="hour in dayTime" :key="hour.id">
                  <div class="roomTime" :style="{ backgroundColor: hour.time < 12 ? '#ECF3FE' : ' #2C70F4' }"></div>
                  <div class="roomTime2" :style="{ color: hour.time < 12 ? '#ACBCF9' : '#2C70F4' }">{{ hour.time
                    }}</div>
                </div>
              </div>
            </div>
          </van-list>
        </van-pull-refresh>
      </div>
    </div>
    <van-popup v-model="showDate" position="bottom">
      <van-datetime-picker type="date" title="选择年月日" v-model="formData.date" @cancel="showDate = false"
        :min-date="minDate" @confirm="onConfirm" />
    </van-popup>
  </div>
</template>

<script>
import qs from 'qs'
export default {
  name: 'meetingOverview',
  data() {
    return {
      minDate: new Date(),
      showDate: false,
      showPicker: false,
      showPickerEndDate: false,
      formData: {
        date: new Date(), // 确保初始化为有效 Date 对象
        pageNo: 1
      },
      finishedText: "",
      dayTime: Array.from({ length: 10 }, (_, i) => ({ id: i + 1, time: i + 8 })),
      inishedText: "",
      error: false,
      loading: false,
      finished: false,
      refreshing: false,
      list: [],
    }
  },
  methods: {
    onLoad() {
      if (this.refreshing) {
        this.list = [];
        this.formData.pageNo = 1;
        this.refreshing = false;
      }
      const queryParams = {
        column: "createTime",
        order: "desc",
        pageNo: this.formData.pageNo,
        pageSize: 20,
        date: this.formData.date
      }
      this.$axios({
        url: `/meetingDetail/list?${qs.stringify(queryParams)}`,
        method: 'get'
      }).then(res => {
        this.formData.pageNo = res.current + 1;
        this.list = [...this.list, ...res.records];
        if (this.list.length === res.total) {
          this.finished = true
          if (this.list.length) {
            this.finishedText = "没有更多了"
          }
        }
      }).catch(() => {
        this.error = true;
      }).finally(() => {
        this.loading = false;
      })
    },
    onRefresh() {
      // 清空列表数据
      this.finished = false;

      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态
      this.loading = true;
      this.onLoad();
    },
    // 去申请
    handleGoApply(item) {
      this.$router.push({
        name: "meetingApply",
        params: item
      })
    },
    onClickBack() {
      this.$router.push('/')
    },
    handleGoPage() {
      this.$router.push({
        path: '/meetingOverview/meetingSet'
      })
    },
    onConfirm(value) {
      console.log(value);
      this.formData = value;
      this.formData.date = this.$dayjs(value).format('YYYY-MM-DD')
      this.showDate = false
      this.refreshing = true;
      this.onRefresh()
    }
  }
}
</script>
<style scoped lang="less">
.selectMeetingRoom {
  background: linear-gradient(115deg, #F7FAFF 0%, #B8D3FA 85%, #DCE9FD 100%);
  backdrop-filter: blur(0px);
  overflow: hidden;
  .fcontent{
    height: calc(100% - 138px);
    transform: translateY(-100px);
    overflow: auto;
    padding: 0 15px 15px;
    .content {
        display: flex;
        flex-direction: column;
        gap: 10px;
        background: linear-gradient(180deg, #BEE3FB 0%, #F5F8FE 100%);
        border-radius: 10px;
        padding: 10px 10px 0px 10px;
    
        .chooseRoom {
          display: flex;
          justify-content: space-between;
          align-items: center;
    
    
          .chooseRoom-title {
            font-weight: 600;
            font-size: 16px;
            color: #01124D;
          }
    
          .chooseRoom-filter {
            display: flex;
            align-items: center;
            color: rgba(1, 18, 77, 0.62);
            font-weight: 600;
            font-size: 14px;
          }
        }
    
        .chooseDate {
          display: flex;
          align-items: center;
          justify-content: space-between;
    
          .chooseDate-text {
            display: flex;
            align-items: center;
            justify-content: center;
          }
    
        }
    
      }
    
      .card {
        padding: 10px;
        background-color: #fff;
        border-radius: 10px;
        font-weight: 600;
        font-size: 14px;
        color: #01124D;
        box-shadow: 0px 0px 13px 0px rgba(150, 180, 255, 0.33);
        overflow: hidden;
    
        .card-title {
          display: flex;
          justify-content: space-between;
    
          .card-title-text {
            font-weight: 600;
            font-size: 16px;
            color: #01124D;
          }
    
          .card-person {
            display: flex;
            align-items: center;
            gap: 5px;
            font-size: 13px;
            border-radius: 60px 0 0 60px;
            background-color: rgba(2, 185, 149, 0.15);
            font-family: PingFangSC, PingFang SC;
            font-weight: 500;
            color: #02B995;
            padding: 0 15px;
            transform: translateX(15px)
          }
        }
    
        .card-things {
          display: flex;
          gap: 5px;
    
          .things {
            padding: 0 5px;
            background: #EDF4FF;
            border-radius: 6px;
            font-weight: 400;
            font-size: 13px;
            color: #01124D;
          }
        }
    
        .card-place {
          display: flex;
          align-items: center;
          gap: 5px;
    
          .place {
            font-weight: 400;
            font-size: 13px;
            color: rgba(1, 18, 77, 0.67);
          }
        }
    
        .card-time {
          display: flex;
          flex-wrap: nowrap;
          gap: 2px;
    
          .roomTime {
            width: 15px;
            height: 8px;
            margin-bottom: 5px;
          }
    
          .roomTime2 {
            font-size: 12px;
            font-weight: 100
          }
        }
    
      }
    
      .card-container {
        // display: flex;
        // flex-direction: column;
        // gap: 10px;
        margin-top: 10px;
    
        .container {
          display: flex;
          flex-direction: column;
          gap: 10px;
          margin-bottom: 10px;
        }
      }
  }

  
}
</style>
